import React from 'react';
import { Spin } from 'antd';
import { WeaTools } from 'ecCom';
import EHeader from '../common/EHeader';
import FooterMore from '../common/FooterMore';
import { NoRightCom } from '../../util/common';

// 自定义元素
class CustomElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: false, deleted: false };
    this.handleRefresh = this.handleRefresh.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  }

  componentWillMount() {
    const { config = {} } = this.props;
    const { item = {} } = config;
    const { custom = {} } = item;
    const { modulename, packagename } = custom;

    if (modulename && !window[packagename]) {
      this.setState({ loading: true });
      WeaTools.loadDevModules(modulename, packagename).then(() => {
        this.interval = window.setInterval(() => {
          if (window[packagename]) {
            window.clearInterval(this.interval);
            this.setState({ loading: false });
          }
        }, 100);
      });
    }
  }

  render() {
    const { loading, deleted } = this.state;

    // 元素已删除，返回空
    if (deleted) return null;

    const { config, fontSizeMp } = this.props;
    const { isHasRight, isSetting, item, params, synergyParams } = config;
    const { eid, ebaseid, style, contentview, custom = {} } = item;
    const { style: style1 = {} } = contentview;
    let { packagename, viewcompname, moreurl } = custom;

    try {
      if (moreurl) {
        if (config.item.header && config.item.header.toolbar && config.item.header.toolbar.more) {
          if (moreurl.indexOf('?') != -1) {
            moreurl += '&ecodeeid=' + eid;
          } else {
            moreurl += '?eid=' + eid;
          }
          config.item.header.toolbar.more.morehref = moreurl;
        }
      } else {
        config.item.header.toolbar.more = null;
      }
    } catch (e) {}

    let EContent = null;
    if (isHasRight) {
      if (!loading) {
        if (window.rewritePortalCusEle && typeof rewritePortalCusEle == 'function') {
          const props = { ...this.props };
          const options = {
            config,
            fontSizeMp,
            isSetting,
            id: eid,
            eid,
            ebaseid,
            params,
            synergyParams
          };
          EContent = window.rewritePortalCusEle(props, options);
        }
        if (EContent == null && window[packagename] && window[packagename]['com'] && window[packagename]['com'][viewcompname]) {
          const EContentTemp = window[packagename]['com'][viewcompname];
          EContent = <EContentTemp ecId={`${this && this.props && this.props.ecId || ''}_EContentTemp@pxfom7`} {...this.props} config={config} fontSizeMp={fontSizeMp} isSetting={isSetting} id={eid} eid={eid} params={params} synergyParams={synergyParams} />;
        }
      } else {
        EContent = <div style={{ width: '100%', height: '60px' }} />;
      }
    } else {
      EContent = <NoRightCom ecId={`${this && this.props && this.props.ecId || ''}_NoRightCom@n1kdxz`} />;
    }

    return (
      <div
        id={`item_${eid}`}
        className="item"
        style={style}
        data-eid={eid}
        data-ebaseid={ebaseid}
        data-needRefresh={item.needRefresh}
        data-cornerTop={item.cornerTop}
        data-cornerTopRadian={item.cornerTopRadian}
        data-cornerBottom={item.cornerBottom}
        data-cornerBottomRadian={item.cornerBottomRadian}
      >
        <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@2nihuf`} config={config} handleRefresh={this.handleRefresh} handleDelete={this.handleDelete} fontSizeMp={fontSizeMp} />
        <div className="setting" id={`setting_${eid}`}></div>
        <div className="content" id={`content_${eid}`} style={{ width: 'auto', _width: '100%' }}>
          <div className="content_view" id={`content_view_id_${eid}`} style={{ height: style1.height }}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@z028rs`} spinning={loading}>{EContent}</Spin>
          </div>
          <div style={{ textAlign: 'right' }} id={`footer_${eid}`}>
            <FooterMore ecId={`${this && this.props && this.props.ecId || ''}_FooterMore@pv3wn6`} config={this.props.config} />
          </div>
        </div>
      </div>
    );
  }

  handleRefresh() {
    this.setState({ loading: true });
    setTimeout(() => this.setState({ loading: false }), 100);
  }

  handleDelete() {
    this.setState({ deleted: true });
  }
}

export default CustomElement;